<template>
	<view>
		<view class="header">
			<view :class="navIndex == i?'new':''" class="list" v-for="(item,i) in navList" :key="i" @tap="navChange(i)">
				{{ item.name }}
				<view class="nav-block" v-if="navIndex == i">
					
				</view>
			</view>
		</view>
		<view class="counpon-list">
			<view class="counpon-item" :class="item.zcouponli?'newcounpon-item':''" v-for="(item,i) in couponList"
				:key="i">
				<view class="counpon-box">
					<view class="counpon-block">

					</view>
					<view class="counpon-block-1">

					</view>
					<view class="counpon-block-2">
						<view class="block-more" v-for="(list,index) in 6">

						</view>
					</view>
					<view class="counpon-left">
						<view class="left-1">
							<text>￥</text>
							<text>{{ item.youprice }}</text>
						</view>
						<view class="left-2">
							满{{ item.manprice }}元可用 <text v-if="navIndex == 0">仅剩{{ item.num }}张</text>
						</view>
						<view class="left-3">
							到期时间 {{ item.endtime_text }}
						</view>
					</view>
					<view class="counpon-right">
						<view class="right" @tap="submitcoun(item)">
							<text v-if="item.zcouponli || navIndex == 1">您已领取</text>
							<text v-else>领券购买</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navIndex: 0,
				navList: [{
						"name": "全部优惠券"
					},
					{
						"name": "我的优惠券"
					}
				],
				couponList: [],
				page:1
			}
		},
		onLoad() {
			this.Getcoupon()
		},
		onPullDownRefresh() {
			this.page = 1
			if(this.navIndex == 0){
				this.Getcoupon()
			}else{
				this.GetMy()
			}
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			this.page ++
			if(this.navIndex == 0){
				this.Getcoupon()
			}else{
				this.GetMy()
			}
		},
		methods: {
			submitcoun(item) {
				uni.showLoading({
					title: '正在领取'
				})
				this.$http.Post('uter/couponAdd', {
					zcoupon_id: item.id
				}, (result) => {
					uni.showToast({
						title: result.msg,
						icon: 'none'
					})
					this.Getcoupon()
					this.$forceUpdate()
				})
			},
			navChange(i) {
				this.page = 1
				this.navIndex = i
				if (i == 0) {
					this.Getcoupon()
				} else {
					this.GetMy()
				}
			},
			GetMy() {
				uni.showLoading({
					title:'正在加载'
				})
				this.$http.Post('uter/couponUserList', {

				}, (result) => {
					uni.hideLoading()
					if(this.page == 1){
						this.couponList = []
					}
					this.couponList = this.couponList.concat(result.data.data) 
				})
			},
			Getcoupon() {
				uni.showLoading({
					title:'正在加载'
				})
				this.$http.Post('zter/couponList', {

				}, (result) => {
					uni.hideLoading()
					if(this.page == 1){
						this.couponList = []
					}
					this.couponList = this.couponList.concat(result.data.data) 
				})
			},
		}
	}
</script>

<style>
	.header {
		margin-top: 20rpx;
		width: 100%;
		display: flex;
		height: 80rpx;
	}

	.list {
		width: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #333;
		font-size: 28rpx;
		position: relative;
	}

	.counpon-list {
		width: 94%;
		margin: 60rpx auto 0 auto;
	}

	.counpon-item {
		margin-bottom: 40rpx;
		border-radius: 16rpx;
		width: 100%;
		height: 200rpx;
		background-color: #f0492f;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.new {
		font-weight: bold;
		color: #ff5502;
	}

	.newcounpon-item {
		margin-bottom: 40rpx;
		border-radius: 16rpx;
		width: 100%;
		height: 200rpx;
		background-color: #696969;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.counpon-box {
		position: relative;
		width: 90%;
		height: 80%;
		display: flex;
	}

	.counpon-block {
		position: absolute;
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		background-color: #f6f6f6;
		top: -35rpx;
		right: 110rpx;
	}

	.counpon-block-1 {
		position: absolute;
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		background-color: #f6f6f6;
		bottom: -35rpx;
		right: 110rpx;
	}

	.counpon-left {
		color: #fff;
		width: 80%;
		height: 100%;
		border-right: 2rpx dashed #fff;
	}

	.left-1 {
		font-weight: bold;
		font-size: 36rpx;
		padding-left: 20rpx;
	}

	.left-2 {
		padding-left: 20rpx;
		margin-top: 20rpx;
		font-size: 26rpx;
	}

	.left-3 {
		padding-left: 20rpx;
		margin-top: 10rpx;
		font-size: 26rpx;
	}

	.counpon-right {
		width: 20%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.right {
		width: 80%;
		color: #fff;
		font-size: 26rpx;
	}

	.counpon-block-2 {
		width: 30rpx;
		height: 200rpx;
		position: absolute;
		left: -46rpx;
	}

	.block-more {
		margin-bottom: 10rpx;
		width: 25rpx;
		height: 25rpx;
		border-radius: 50%;
		background-color: #f6f6f6;
	}
	
	.nav-block{
		width: 80rpx;
		height: 2rpx;
		background-color: #ff5502;
		position: absolute;
		bottom: 0;
	}
</style>